/**
 * 忘记密码
 */
import React, { Component } from 'react';
import { Button, Row, Form, Input, message } from 'antd';
import cass from 'classnames';
import { mobileExp, pwdExp } from '../../utils/regExp';
import { isSuccess } from '../../configs/error';
// import { sendVerificationCode, forgetReset } from '../../services/sysUser';
import { sendVerificationCode, forgetReset } from '../../services/login';
import { query } from '../../services/maintainer';
import s from './index.less';


const FormItem = Form.Item;

const pwdKey = 'newPassword';
const codeErr = '请输入验证码';

class Forget extends Component {
	state = {
		time: 0
	}


	componentWillUnmount() {
		this.codeId ? clearInterval(this.codeId) : null;
	}

	sendCode = async () => {
		// 发送验证码
		const { form: { getFieldsValue } } = this.props;
		const valueObj = getFieldsValue();
		if (/^1[34578]\d{9}$/.test(valueObj.mobile)) {
			const res = await sendVerificationCode(valueObj.mobile);
			if (isSuccess(res)) {
				this.setState({ time: 60 });
				this.codeId = setInterval(this.timing, 1000);
			}
		} else {
			message.warning('请输入正确的手机号');
		}
	}

	timing = () => {
		let { time } = this.state;
		time--;
		if (time <= 0) {
			time = 0;
			clearInterval(this.codeId);
			delete this.codeId;
		}
		this.setState({ time });
	}

	handleOk = () => {
		const { code } = this.state;
		const { form: { validateFieldsAndScroll, setFields }, back } = this.props;
		if (!code) {
			this.setState({ codeError: codeErr });
		}
		validateFieldsAndScroll(async (errors, values) => {
			if (errors || !code) {
				return;
			}
			if (values[pwdKey] !== values.repassword) {
				return setFields({
					repassword: {
						value: values.repassword,
						errors: [new Error('两次密码不相同')],
					}
				});
			}
			delete values.repassword;
			values.message = code;
			const res = await forgetReset(values);
			if (isSuccess(res)) {
				message.success('重置密码成功');
				back();
			} else {
				message.error('重置密码失败');
			}
		});
	}

	validator = (rule, value, callback) => {
		const data = this.props.form.getFieldsValue();
		data[pwdKey] === value ? callback() : callback(true);
	}

	validateCode = e => {
		const code = e.target.value;
		const codeError = code ? '' : codeErr;
		this.setState({ code, codeError });
	}

	render() {
		const { time, codeError, code } = this.state;
		const { form: { getFieldDecorator }, back } = this.props;
		return (
			<Form className={s.forget}>
				<FormItem hasFeedback>
					{getFieldDecorator('mobile', {
						rules: [{
							required: true,
							pattern: mobileExp.exp,
							message: mobileExp.des
						}]
					})(<Input placeholder="请输入手机号" />)}
				</FormItem>
				<FormItem hasFeedback required help={codeError} validateStatus={codeError ? 'error' : null} className={s.errorOffset}>
					<div>
						<Input className={s.codeInput} placeholder="请输入短信验证码" onChange={this.validateCode} value={code} />
						<Button className={s.codeBut} onClick={this.sendCode} disabled={time}>{time ? `请等待${time}秒` : '获取验证码'}</Button>
					</div>
				</FormItem>
				<FormItem hasFeedback>
					{getFieldDecorator(pwdKey, {
						rules: [{
							required: true,
							pattern: pwdExp.exp,
							message: pwdExp.des
						}]
					})(<Input type="password" placeholder="请输入新密码" />)}
				</FormItem>
				<FormItem hasFeedback>
					{getFieldDecorator('repassword', {
						rules: [
							{
								required: true,
								message: '请再次输入新密码!'
							},
							{
								validator: this.validator,
								message: '两次密码不相同'
							}
						]
					})(<Input type="password" placeholder="请再次输入新密码" />)}
				</FormItem>
				<Row>
					<Button type="primary" onClick={this.handleOk} >
						确 定
					</Button>
				</Row>
				<span className={cass('cursor', s.forgetSpan)} onClick={back}>回到登录</span>
			</Form>
		);
	}
}

export default Form.create()(Forget);
